<template>
  <basic-container :btnFlag=true>
    <div class="card-border">
      <card-header :header-data="headerData"></card-header>
      <el-form
        label-width="130px"
        :model="projectForm"
        style="padding-right: 30px;"
        :rules="subjectlevyFormRules"
        ref="projectForm"
      >
        <el-row>
          <el-col :span="16" style="margin-top: 27px;">
            <el-form-item class="form-item" label="规划名称 :" prop="achievementTitle">
              <el-input
                placeholder="请输入规划名称"
                v-model="projectForm.achievementTitle"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button size="small" type="primary" style="margin-left: 10px;margin-top: 31px" @click="choosePlanning()">
              选择规划
            </el-button>
          </el-col>
          <el-col :span="4" v-if="projectForm.achievementId!=0">
            <el-button size="small" type="success" style="margin-left: -50px;margin-top: 31px"
                       @click="resultDetailTemp()">规划详情
            </el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item class="form-item" label="课题征集主题 :" prop="title">
              <el-input
                placeholder="请输入课题征集主题"
                v-model="projectForm.title"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item class="form-item" label="征集范围 :" prop="approvingAuthorityNature">
              <el-select
                v-model="projectForm.collectionRange"
                placeholder="请选择"
                style="width: 280px;"
              >
                <el-option
                  v-for="item in natureDIC"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
              <el-form-item class="form-item" label="反馈部门 :" prop="supportDeptName">
                {{projectForm.supportDeptName}}
                <el-input v-model="projectForm.supportDeptName" placeholder="请输入征集要求" style="display: none"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-button size="small" type="primary" icon="el-icon-plus" style="margin-left: 10px;"
                         @click="clickLevyDept">反馈部门
              </el-button>
            </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item class="form-item" label="反馈截止时间 :" prop="endDate" style="float: left;">
              <div>
                <el-date-picker
                  style="width:320px"
                  v-model="projectForm.endDate"
                  type="datetime"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  :picker-options="expireTimeOption"
                >
                </el-date-picker>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item class="form-item" label="联系人:" prop="contactName">
              <el-input v-model="projectForm.contactName" placeholder="请输入联系人"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item class="form-item" label="联系电话:" prop="contactNumber">
              <el-input v-model="projectForm.contactNumber" placeholder="请输入联系电话"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item class="form-item" label="课题征集要求 :" prop="content">
              <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 4}"
                placeholder="请输入征集要求"
                v-model="projectForm.content"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="22">
            <el-form-item class="form-item" label="相关材料:">
              <el-upload
                class="upload-demo"
                ref="uploadrelated"
                action="string"
                :http-request="submitUploadMixin"
                :on-preview="handlePreviewMixin"
                :on-remove="handleRemoveMixin"
                :file-list="fileListMixin"
                :auto-upload="true"
                :on-change="fileChangeMixin">
                <el-button slot="trigger" size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="form-submit">
        <el-button type="primary" :disabled="isDisabled" @click.stop="commitList()">发 送</el-button>
        <el-button type="info" @click.stop="goBack()">关 闭</el-button>
      </div>
      <dept-check :visible="deptVisible" mini-type="2" @getCheckInfo="getCheckInfo" @cancel="cancelSupportDept" ></dept-check>

      <el-dialog title="请选择规划" :visible.sync="dialogFormVisible" width="85%">
        <span style="font-size: 17px;font-weight: 600;color: black;margin-left: 27px;">所选规划：{{choosedPlanning}}</span>
        <div class="form-group">
          <span class="form-label">规划名称:</span>
          <input
            type="text"
            name="key"
            v-model="selectedOptions.titleLike"
            id="searchInput"
            ref="searchInput"
            placeholder="请输入规划名称"
            style="width: 500px;"
            @keyup.enter="searchSubmit()"
          >
          <div class="form-submit-dialog">
            <el-button type="warning" size="small" @click.stop="searchSubmit()">查询</el-button>
            <el-button type="info" size="small" @click.stop="searchReset()">重置</el-button>
          </div>
        </div>
        <transition name="fade1">
          <div v-if="!showall">
            <div :class="{showall:true,active:showall}">
              <el-divider></el-divider>
              <avue-search :option="option" v-model="selectedOptions" @change="handleChange"></avue-search>
            </div>
          </div>
        </transition>
        <transition name="fade">
          <div v-if="showall">
            <div :class="{showall:true,active:showall}">
              <el-divider></el-divider>
              <avue-search
                :option="option"
                v-model="selectedOptions"
                @change="handleChange"></avue-search>
            </div>
          </div>
        </transition>
        <div class="search-collapse">
          <div class="collapse-title" :class="{active:showall}" v-on:click="showall=!showall">
            <img v-if="!showall" :src="`${publicPath}img/packdown.png`" class="collapse-title-img">
            <p v-if="!showall" class="collapse-title-text">展开搜索条件</p>
            <img v-if="showall" :src="`${publicPath}img/packUp.png`" class="collapse-title-img">
            <p v-if="showall" class="collapse-title-text">收起搜索条件</p>
          </div>
        </div>
        <div style="margin-top: 18px;margin-left: 10px;font-weight: 600;">搜索结果列表</div>
        <div class="card-body">
          <avue-crud :data="resultListData"
                     :option="tableoption"
                     :page="page"
                     :table-loading="tableLoading"
                     @on-load="getResultList"
                     @refresh-change="refreshChange"
                     @search-change="searchChange"
                     @current-row-change="handleCurrentRowChange"
                     class="avuecrud">
            <template slot-scope="scope" slot="menu">
              <div class="menu-title" @click.stop="resultDetail(scope.row,scope.index)">
                <i class="iconfont iconview icon-primary"></i>
                <p class="menu-title-text">详情</p>
              </div>
            </template>
          </avue-crud>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelPlanning()">取 消</el-button>
          <el-button type="primary" @click="confirmPlanning()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </basic-container>
</template>

<script>
  import {subjectlevyFormRules} from "@/const/infoRules";
  import {subjectCollection} from "@/api/subject";
  import {PROJECT_DIC} from '@/const/dict';
  import {resultPageDept} from "@/api/planning/result";
  import {getAreaByType} from "@/api/system";
  import relatedfile from "@/mixins/relatedfile";
  import {mapGetters} from "vuex";

  export default {
    name: "subjectLevy",
    computed: {
      ...mapGetters([
        "deptInfo"
      ])
    },
    mixins: [relatedfile],
    created() {
      this.getarea();
      this.getselectedOptionsHistory();
      this.projectForm.collectionRange = '1'
    },
    watch: {
      'selectedOptions.area'(val) {
        var areacode = val.substring(0, 4);
        getAreaByType(Object.assign({
          current: 1,
          size: 200,
          valueLike: areacode,
          type: "area_code_county",
        })).then(response => {
          var records = response.data.data.records;
          var arealist = [];
          arealist.push(this.dictobj);
          for (var item in records) {
            var dictObj = {
              label: records[item].label,
              value: records[item].value
            };
            arealist.push(dictObj)
          }
          this.arealisttempdistrict = arealist;
          for (var item in this.option.column) {
            if (this.option.column[item].prop == "district") {
              this.option.column[item].dicData = this.arealisttempdistrict;
            }
          }
        })
      }
    },
    data() {
      const getYearDic = _ => {
        return [{
          label: '全部',
          value: '-1',
        }].concat(PROJECT_DIC.YEAR)
      };
      const getApplyForCategoryDic = _ => {
        return [{
          label: '全部',
          value: '-1',
        }].concat(PROJECT_DIC.CATEGORY)
      };
      const getPlanningRankDic = _ => {
        return [{
          label: '全部',
          value: '-1',
        }].concat(PROJECT_DIC.PLANNING_RANK)
      };
      const getLevelDic = _ => {
        return [{
          label: '全部',
          value: '-1',
        }].concat(PROJECT_DIC.PLANNING_LEVEL)
      };
      return {
        headerData: {
          title: '课题征集'
        },
        subjectlevyFormRules: subjectlevyFormRules,// 表单验证
        projectForm: {
          achievementId: 0,
          deptIds: [],
          contactName: '',
          contactNumber: '',
          content: '',
          title: '',
          fileIds: [],
          endDate:'',
          supportDeptName: '',
          collectionRange: '1',
          achievementTitle: '',
          formContent: '',
        },
        deptVisible: false,//协同部门树弹窗标志
        singletableoption: {
          page: false,
          menuWidth: 150,
          addBtn: false,
          editBtn: false,
          addRowBtn: false,
          indexLabel: "序号",
          index: true,
          indexWidth:70,
          cellBtn: false,
          delBtn: false,
          columnBtn: false,
          refreshBtn: false,
          filterBtn: false,
          searchBtn: false,
          keyId: "id",
          column: [{
            label: "年份",
            prop: "year",
            cell: true,
          },
            {
              label: "规划名称",
              width: 200,
              prop: "title",
              cell: true
            },
            {
              label: "规划编码",
              prop: "pmuc",
              width: 200,
              cell: true,
            },
            {
              label: "申报单位",
              prop: "orgName",
              cell: true,
            },
            {
              label: "规划类型",
              prop: "category",
              type: "select",
              dicData: PROJECT_DIC.CATEGORY,
              cell: true
            },
            {
              label: "联系人姓名",
              prop: "contactName",
              cell: true,
            },
            {
              label: "联系人电话",
              prop: "contactNumber",
              cell: true,
            },
          ]
        },
        singletableLoading: false,
        singleresultListData: [],
        dialogFormVisible: false,
        state: '0,1',//状态
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        tableLoading: false,
        resultListData: [],
        tableoption: {
          highlightCurrentRow: true,
          page: true,
          menuWidth: 150,
          addBtn: false,
          editBtn: false,
          addRowBtn: false,
          indexLabel: "序号",
          index: true,
          indexWidth:70,
          cellBtn: false,
          delBtn: false,
          columnBtn: false,
          refreshBtn: false,
          filterBtn: false,
          searchBtn: false,
          keyId: "id",
          column: [{
            label: "年份",
            prop: "year",
            cell: true,
          },
            {
              label: "规划名称",
              width: 200,
              prop: "title",
              cell: true
            },
            {
              label: "规划编码",
              prop: "pmuc",
              width: 200,
              cell: true,
            },
            {
              label: "申报单位",
              prop: "orgName",
              cell: true,
            },
            {
              label: "规划类型",
              prop: "category",
              type: "select",
              dicData: PROJECT_DIC.CATEGORY,
              cell: true
            },
            {
              label: "联系人姓名",
              prop: "contactName",
              cell: true,
            },
            {
              label: "联系人电话",
              prop: "contactNumber",
              cell: true,
            },
          ]
        },
        option: {
          column: [
            {
              label: "年份",
              prop: "year",
              multiple: false,
              dicData: getYearDic()
            },
            {
              label: "规划类型",
              prop: "categorys",
              multiple: false,
              dicData: getApplyForCategoryDic()
            },
            {
              label: "发布等级",
              prop: "planningRanks",
              multiple: false,
              dicData: getPlanningRankDic()
            },
            {
              label: "发布层级",
              prop: "planningLevels",
              multiple: false,
              dicData: getLevelDic()
            },
            {
              label: "市级",
              prop: "area",
              multiple: false,
              dicData: this.getarea,
            },
            {
              label: "区县",
              prop: "district",
              multiple: false,
              dicData: this.arealisttempdistrict,
            },
          ]
        },
        selectedOptions: {
          categorys: "-1",
          planningRanks: "-1",
          planningLevels: "-1",
          area: '-1',
          district: '-1',
          year: '-1',
          titleLike: ''
        },
        resetSelectedOptions: {
          categorys: "-1",
          planningRanks: "-1",
          planningLevels: "-1",
          area: '-1',
          areCode: '-1',
          district: '-1',
          year: '-1',
          titleLike: ''
        },
        selectedOptionsHistory: {
          categorys: "-1",
          planningRanks: "-1",
          planningLevels: "-1",
          area: '-1',
          district: '-1',
          year: '-1',
          titleLike: ''
        },
        showall: false,
        publicPath: process.env.BASE_URL,
        dictobj: {
          label: '全部',
          value: '-1',
        },
        arealisttemp: [],
        arealisttempdistrict: [],
        choosedPlanning: '',
        choosedPlanningTemp: '',
        // 立项依据
        basisContent: '',
        basisOption: {
          // something config
          modules: {
            toolbar: null
          },
          placeholder: '请输入立项依据'
        },
        natureDIC: [
          {
            label: '部门',
            value: '1',
          }
        ],
        isDisabled: false,
        expireTimeOption: {
          disabledDate(date) { //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
            return date.getTime() <= Date.now();
          }
        },
      }
    },
    methods: {
      // 弹出征集部门弹框
      clickLevyDept() {
        this.deptVisible = true
      },
      cancelSupportDept(deptIds, deptNames) {
        this.deptVisible = false;
      },
      getCheckInfo(deptIds, deptNames) {
        this.projectForm.supportDeptName = deptNames;
        this.projectForm.deptIds = deptIds.split(",");
        this.deptVisible = false;
      },
      levyDeptCodeClick() {
      },
      goBack() {
        this.$router.go(-1);
      },
      commitList() {
        if (this.projectForm.supportDeptName == '') {
          this.$notify({
            title: "提醒",
            type: "warning",
            message: "请选择反馈部门",
            duration: 2000
          });
          return;
        }
        if (this.projectForm.achievementId == 0) {
          this.$notify({
            title: "提醒",
            type: "warning",
            message: "请选择规划",
            duration: 2000
          });
          return;
        }

        this.$refs.projectForm.validate(valid => {
          if (valid) {
            this.$confirm("确定发布课题征集吗?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              var arr = [];
              for (var item in this.fileListMixin) {
                arr.push(this.fileListMixin[item].url);
              }
              this.projectForm.fileIds = arr;
              this.isDisabled = true;
              subjectCollection(this.projectForm).then(response => {
                if (response.data.code == 0) {
                  this.$notify({
                    title: "成功",
                    message: "发布成功",
                    type: "success",
                    duration: 2000
                  });
                  this.$router.go(-1);
                }
              })
            });
            this.isDisabled = false;
          }else{
            this.isDisabled = false;
          }
        })
      },
      choosePlanning() {
        this.dialogFormVisible = true;
      },
      cancelPlanning() {
        this.dialogFormVisible = false;
      },
      getResultList(page) {
        this.tableLoading = true;
        sessionStorage.setItem('selectedOptionsHistory.categorysLevy', this.selectedOptions.categorys);
        sessionStorage.setItem('selectedOptionsHistory.planningRanksLevy', this.selectedOptions.planningRanks);
        sessionStorage.setItem('selectedOptionsHistory.planningLevelsLevy', this.selectedOptions.planningLevels);
        sessionStorage.setItem('selectedOptionsHistory.areaLevy', this.selectedOptions.area);
        sessionStorage.setItem('selectedOptionsHistory.districtLevy', this.selectedOptions.district);
        sessionStorage.setItem('selectedOptionsHistory.yearLevy', this.selectedOptions.year);
        sessionStorage.setItem('selectedOptionsHistory.titleLikeLevy', this.selectedOptions.titleLike);
        resultPageDept(Object.assign({
          current: page.currentPage,
          size: page.pageSize,
          states: this.state,
        }, this.filterFormData(this.selectedOptions))).then(response => {
          this.resultListData = response.data.data.records;
          this.page.total = response.data.data.total;
          this.tableLoading = false
        })
      },
      refreshChange() {
        this.getResultList(this.page)
      },
      // 搜索
      searchChange(params) {
        this.page.currentPage = 1
        this.getResultList(this.page, this.dealSearchParam(params))
      },
      // 处理搜索过滤
      dealSearchParam(params) {
        if (params.title) {
          params.titleLike = params.title;
          params.title = ''
        }
        if (params.category) {
          params.categorys = params.category;
          params.category = ''
        }
        return params;
      },
      // 成果详情跳转
      resultDetail(row, index) {
        let src = `/searchDetail/detail/${row.achievementId}`;
        this.$router.push({
          path: src
        })
      },
      // 成果详情跳转
      resultDetailTemp() {
        let src = `/searchDetail/detail/${this.projectForm.achievementId}`;
        this.$router.push({
          path: src
        })
      },
      searchSubmit() {
        if (this.selectedOptions.district != -1 && this.selectedOptions.district != '') {
          this.selectedOptions.areaCodeLike = this.selectedOptions.district
        } else {
          this.selectedOptions.areaCodeLike = this.selectedOptions.area
        }
        this.selectedOptions.areaCodeLike = this.selectedOptions.areaCodeLike.substring(0, 6);
        this.getResultList(this.page)
      },
      searchReset() {
        this.selectedOptions = this.resetSelectedOptions;
        this.getResultList(this.page)
      },
      handleChange(form) {

      },
      getarea() {
        let provinceCode = this.deptInfo.areaCode.substring(0, 2);
        getAreaByType(Object.assign({
          current: 1,
          size: 200,
          valueLike: provinceCode,
          type: "area_code_city"
        })).then(response => {
          var records = response.data.data.records;
          var arealist = [];
          arealist.push(this.dictobj);
          for (var item in records) {
            var dictObj = {
              label: records[item].label,
              value: records[item].value
            };
            arealist.push(dictObj)
          }
          this.arealisttemp = arealist;
          for (var item in this.option.column) {
            if (this.option.column[item].prop == "area") {
              this.option.column[item].dicData = this.arealisttemp;
            }
          }
        })
      },
      filterFormData(form) {
        var formMap = {};
        Object.keys(form).forEach(function (name) {
          if (form[name] != -1) {
            formMap[name] = form[name]
          }
        });
        return formMap;
      },
      getselectedOptionsHistory() {
        if (sessionStorage.getItem('selectedOptionsHistory.categorysLevy') != null) {
          this.selectedOptionsHistory.categorys = sessionStorage.getItem('selectedOptionsHistory.categorysLevy')
        }
        if (sessionStorage.getItem('selectedOptionsHistory.planningRanksLevy') != null) {
          this.selectedOptionsHistory.planningRanks = sessionStorage.getItem('selectedOptionsHistory.planningRanksLevy')
        }
        if (sessionStorage.getItem('selectedOptionsHistory.planningLevelsLevy') != null) {
          this.selectedOptionsHistory.planningLevels = sessionStorage.getItem('selectedOptionsHistory.planningLevelsLevy')
        }
        if (sessionStorage.getItem('selectedOptionsHistory.districtLevy') != null) {
          this.selectedOptionsHistory.district = sessionStorage.getItem('selectedOptionsHistory.districtLevy')
        }
        if (sessionStorage.getItem('selectedOptionsHistory.yearLevy') != null) {
          this.selectedOptionsHistory.year = sessionStorage.getItem('selectedOptionsHistory.yearLevy')
        }
        if (sessionStorage.getItem('selectedOptionsHistory.areaLevy') != null) {
          this.selectedOptionsHistory.area = sessionStorage.getItem('selectedOptionsHistory.areaLevy')
        }
        if (sessionStorage.getItem('selectedOptionsHistory.titleLikeLevy') != null) {
          this.selectedOptionsHistory.titleLike = sessionStorage.getItem('selectedOptionsHistory.titleLikeLevy')
        }
        var selectedOptionsHistory = this.selectedOptionsHistory;
        this.selectedOptions = selectedOptionsHistory;
        if (this.selectedOptions.district != -1 && this.selectedOptions.district != '') {
          this.selectedOptions.areaCodeLike = this.selectedOptions.district
        } else {
          this.selectedOptions.areaCodeLike = this.selectedOptions.area
        }
        this.selectedOptions.areaCodeLike = this.selectedOptions.areaCodeLike.substring(0, 6)
      },
      handleCurrentRowChange(val) {
        this.choosedPlanningTemp = val;
        this.choosedPlanning = val.title;
        this.$notify({
          showClose: true,
          message: '已选规划： ' + val.title,
          type: 'success',
        });
      },
      confirmPlanning() {
        this.singleresultListData = [this.choosedPlanningTemp];
        this.dialogFormVisible = false;
        this.projectForm.achievementId = this.choosedPlanningTemp.achievementId;
        this.projectForm.achievementTitle = this.choosedPlanningTemp.title;
        this.projectForm.title = this.choosedPlanningTemp.orgName+'关于征集《'+this.choosedPlanningTemp.title+'》前期研究选题的通知'
      }
    },
  }
</script>


<style lang="scss" scoped>
  table.gridtable {
    width: 100%;
    font-family: verdana, arial, sans-serif;
    font-size: 11px;
    color: #333333;
    border-width: 1px;
    border-color: grey;
    border-collapse: collapse;
  }
  table.gridtable th {
    border-width: 1px;
    width: 20%;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
  }
  table.gridtable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #ffffff;
  }
  .card-border {
    border: 1px solid #d2d2d2;
    padding: 12px;
  }
  .form-submit {
    text-align: center;
    margin-top: 15px;
  }
  .card-body {
    padding: 10px;
  }
  .head-button .el-button {
    padding: 8px 15px;
  }
  .form-item {
    font-weight: 600;
  }
  .form-group {
    margin-top: 1rem;
    margin-left: 26px;
  }
  .form-label {
    font-weight: 600;
    margin-right: 2rem;
  }
  .form-submit-dialog {
    float: right;
    margin-right: 22px;
  }
  .search-collapse {
    margin-top: 1rem;
  }
  .collapse-title {
    margin-top: -1rem;
    text-align: center;
    border-top: 1px solid #dedbdb;
    border-bottom: 1px solid #dedbdb;
  }
  .collapse-title-text {
    color: #4297dc;
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    margin-left: 0.2rem;
    margin: 10px 0px;
  }
  .collapse-title-img {
    width: 1.2rem;
    position: relative;
    top: 0.25rem;
  }
  .showall {
    padding: 10px;
    height: 0px;
    overflow: hidden;
    .fade-enter-active {
      transition: opacity 0.9s ease-out;
    }
    .fade-leave-active {
      transition: opacity 0s ease-out;
    }
    .fade-enter, .fade-leave-to {
      opacity: 0;
    }
    .fade1-enter-active {
      transition: opacity 0.9s ease-out;
    }
    .fade1-enter, .fade1-leave-to {
      opacity: 0;
    }
    clear: both;
  }
  .showall.active {
    height: auto;
    background: #fff;
    min-height: 150px;
  }
  #searchInput {
    height: 40px;
    border: 1px solid #dadada;
    outline: 0;
    line-height: 40px;
    text-indent: 1rem;
    border-radius: 0.31rem;
  }
  .table-bordered-temp {
    border: 1px solid #dee2e6;
  }

  .table-temp {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
    border-collapse: collapse;
  }
  /deep/.avue-search__title {
    padding: 0 26px;
    margin-left: -13px;
  }
  /deep/.avue-search__tags--active {
    color: #fff;
    background-color: #1890ff;
    border-radius: 5px;
    padding: 5px 10px;
  }
</style>

